<template>
  <view class="page-container">
    <view class="btns-box">
      <view class="btns">
        <el-button class="btn" size="mini" type="danger" @click="exportExcel">导出选中表格</el-button>
      </view>
    </view>
    <uni-ele-table :columns="columns" :data="tableData" pageable @action="handleClick" @pageChange="pageChange"
                   @selectionChange="selectionChange"></uni-ele-table>
  </view>
</template>

<script>
import {
  pageHistory,
  downLoadExcel,
  deleteHistoryById,
  createDownLoadTask,
  downLoadExcelBatch
} from '@/common/services/house.js';

export default {
	data() {
		return {
			size: 20,
			columns: [
        {
          title: '序号',
          valueType: 'selection',
          align: 'center'
        },
        {
          title: '表格类型',
          dataIndex: 'houseTypeText',
          align: 'center',
          minWidth: 125
        },
        {
          title: '表格标题',
          dataIndex: 'title',
          align: 'center',
          minWidth: 125,
          style: {
            display: 'initial'
          }
        },
        {
          title: '上传用户',
          dataIndex: 'username',
          align: 'center',
          minWidth: 125
        },
        {
          title: '当前表格状态',
          dataIndex: 'confirm',
          align: 'center',
          minWidth: 180,
          render: row => {
            if (row.confirm) {
              return `表格已上传确认提交`;
            }
            return `表格已上传未确认提交`;
          }
        },
        {
          title: '表格上传时间',
          dataIndex: 'createTime',
          align: 'center',
          minWidth: 125
        },
        {
          title: '操作',
          valueType: 'action',
          fixed: 'right',
          width: 100,
          actions: [
            {
              title: '下载',
              type: 'downLoad',
              authCode: 'house:upload:history:download'
            },
            {
              title: '删除',
              type: 'delete',
              authCode: 'house:upload:history:delete'
            }
          ]
        }
      ],
      /* table 数据 */
      tableData: {},
      type: 0,
      selectedIds: []
    };
	},
	onLoad(option) {
		this.type = option.type || 0;
		this.list();
	},
	methods: {
		list(params) {
			let self = this;
			pageHistory({ ...params, type: this.type, size: this.size }).then(ret => {
				self.tableData = ret;
			});
		},
		handleClick(data) {
      let self = this;
			switch (data.event.type) {
				case 'downLoad':
					downLoadExcel(data.item.id);
          break;
        case 'delete':
          this.$confirm('确定要删除这条数据吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteHistoryById(data.item.id).then(ret => {
              self.$utils.notify('操作成功');
              self.onSearch();
            });
          });
          break;
      }
    },
    pageChange(e, size) {
      this.size = size || this.size;
      this.list({
        current: e,
        ...this.searchData
      });
    },
    onSearch(e) {
      if (e) {
        this.searchData = e;
      }
      this.list({
        current: 1,
        ...this.searchData
      });
    },
    selectionChange(e) {
      let selectedIds = [];
      e.forEach(it => {
        selectedIds.push(it.id);
      });
      this.selectedIds = selectedIds;
    },
    async exportExcel() {
      let self = this;
      if (this.selectedIds.length === 0) {
        self.$utils.notify('请选择需要下载的表格数据', 'warning');
        return;
      }
      let ret = await createDownLoadTask({ids: this.selectedIds});
      downLoadExcelBatch(ret);
    }
  }
};
</script>

<style lang="scss" scoped>
.btns-box {
  padding: 0 16px;
  margin-bottom: -5px;
  border-radius: 5px;
  background-color: #fff;
  height: 50px;
  width: 100%;
  // border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  .upload-btn {
    margin: 0 10px;
    width: 80px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 12px;
    // background-color: #409eff;
    border: 1px solid #ccc;
  }
}
</style>
